﻿@page "/docs/components/offcanvas"

<Seo Canonical="/docs/components/offcanvas" Title="Blazorise Offcanvas component" Description="Learn to use and work with the Blazorise Offcanvas component, which provides a flexible way to display content off-canvas." />

<DocsPageTitle Path="Components/Offcanvas">
    Blazorise Offcanvas component
</DocsPageTitle>

<DocsPageLead>
    Blazorise Offcanvas component allows to build hidden sidebars into your project for navigation, shopping carts.
</DocsPageLead>

<DocsPageParagraph>
    Offcanvas is a sidebar component that can be toggled to appear from the start, end, top, or bottom edge of the viewport.
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Paragraph>
            <Code Tag>Offcanvas</Code> the main container.
        </Paragraph>
        <UnorderedList>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>OffcanvasHeader</Code>, a main offcanvas header.
                </Paragraph>
            </UnorderedListItem>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>OffcanvasBody</Code>, a main content of the offcanvas.
                </Paragraph>
            </UnorderedListItem>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>OffcanvasFooter</Code>, a main offcanvas footer.
                </Paragraph>
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Start Placement">
        The Offcanvas with the start placement appears from the beginning of the screen.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <OffcanvasStartExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="OffcanvasStartExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Top Placement">
        The Offcanvas with the top placement appears from the top of the screen.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <OffcanvasTopExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="OffcanvasTopExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Bottom Placement">
        The Offcanvas with the bottom placement appears from the bottom of the screen.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <OffcanvasBottomExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="OffcanvasBottomExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="End Placement">
        The Offcanvas with the end placement appears from the end of the screen.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <OffcanvasEndExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="OffcanvasEndExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Closing">
        If you want to prevent modal from closing you can use <Code>Closing</Code> event.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <OffcanvasClosingExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="OffcanvasClosingExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Footer">
        To show a footer in the Offcanvas just add an <Code>OffcanvasFooter</Code> component.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <OffcanvasFooterExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="OffcanvasFooterExample" />
</DocsPageSection>


<ComponentApiDocs ComponentTypes="[typeof(Offcanvas),typeof(OffcanvasHeader),typeof(OffcanvasBody),typeof(OffcanvasFooter)]" />